<div nz-row>
  <div nz-col [nzSpan]="12">
    <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="email" nz-form-item-required>E-mail</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
      <nz-input [nzSize]="'large'" formControlName="email" [nzId]="'email'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">The input is not valid E-mail!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="password" nz-form-item-required>Password</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('password')">
      <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">Please input your password!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="checkPassword" nz-form-item-required>Confirm Password</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('checkPassword')">
      <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">Please confirm your password!</div>
      <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">Two passwords that you enter is inconsistent!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="nickname" nz-form-item-required>
            <span>
              Nickname
              <nz-tooltip [nzTitle]="'What do you want other to call you'">
                <i nz-tooltip class="anticon anticon-question-circle-o"></i>
              </nz-tooltip>
            </span>
      </label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('nickname')">
      <nz-input [nzSize]="'large'" formControlName="nickname" [nzId]="'nickname'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('nickname').dirty&&getFormControl('nickname').hasError('required')">Please input your nickname!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="phoneNumber" nz-form-item-required>Phone Number</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('phoneNumber')">
      <nz-input-group [nzSize]="'large'" [nzCompact]="true">
        <nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
          <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
          <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
        </nz-select>
        <input formControlName="phoneNumber" id="'phoneNumber'" nz-input style="width: 75%;">
      </nz-input-group>
      <div nz-form-explain *ngIf="getFormControl('phoneNumber').dirty&&getFormControl('phoneNumber').hasError('required')">Please input your phone number!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="website" nz-form-item-required>Website</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="getFormControl('website')">
      <nz-input [nzSize]="'large'" formControlName="website" [nzId]="'website'"></nz-input>
      <div nz-form-explain *ngIf="getFormControl('website').dirty&&getFormControl('website').hasError('required')">Please input website!</div>
    </div>
  </div>
  <div nz-form-item nz-row>
    <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
      <label for="captcha" nz-form-item-required>Captcha</label>
    </div>
    <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('captcha')">
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="12">
          <nz-input [nzSize]="'large'" formControlName="captcha" [nzId]="'captcha'"></nz-input>
        </div>
        <div nz-col [nzSpan]="12">
          <button nz-button [nzSize]="'large'" (click)="getCaptcha($event)">Get captcha</button>
        </div>
      </div>
      <div nz-form-extra>We must make sure that your are a human.</div>
      <div nz-form-explain *ngIf="getFormControl('captcha').dirty&&getFormControl('captcha').hasError('required')">Please input the captcha you got!</div>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
      <label nz-checkbox formControlName="agree">
        <span>I have read the <a>agreement</a></span>
      </label>
    </div>
  </div>
  <div nz-form-item nz-row style="margin-bottom:8px;">
    <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
      <button nz-button [nzSize]="'large'" [nzType]="'primary'">Register</button>
    </div>
  </div>
</form>
  </div>
  <div nz-col [nzSpan]="12">
    <form nz-form [nzType]="'horizontal'">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Fail</label>
        </div>
        <div nz-form-control [nzValidateStatus]="'error'" nz-col [nzSpan]="12">
          <nz-input [ngModel]="'unavailable choice'" [nzSize]="'large'" name="errorValid">
          </nz-input>
          <div nz-form-explain>Should be combination of numbers & alphabets</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Warning</label>
        </div>
        <div nz-form-control [nzValidateStatus]="'warning'" nz-col [nzSpan]="12">
          <nz-input [ngModel]="'Warning'" [nzSize]="'large'" name="warningValid">
          </nz-input>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Validating</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="'validating'" nzHasFeedback>
          <nz-input [ngModel]="'The content is being validating'" [nzSize]="'large'" name="validating">
          </nz-input>
          <div nz-form-explain>I'm the content is being validating</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Success</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="12" [nzValidateStatus]="'success'" nzHasFeedback>
          <nz-input [ngModel]="'The content'" [nzSize]="'large'" name="successValid">
          </nz-input>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Warning</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="'warning'" nzHasFeedback>
          <nz-input [ngModel]="'Warning'" [nzSize]="'large'" name="warningHighValid">
          </nz-input>
          <div nz-form-explain>Should be combination of numbers & alphabets</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label>Fail</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="'error'" nzHasFeedback>
          <nz-input [ngModel]="'unavailable choice'" [nzSize]="'large'" name="invalidValid">
          </nz-input>
          <div nz-form-explain>Should be combination of numbers & alphabets</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="5">
          <label nz-form-item-required>inline</label>
        </div>
        <div>
          <div nz-form-control>
            <div nz-col [nzSpan]="6">
              <div nz-form-item nz-row>
                <div>
                  <div nz-form-control [nzValidateStatus]="'error'">
                    <nz-datepicker [nzSize]="'large'" [nzPlaceHolder]="'Select date'"></nz-datepicker>
                    <div nz-form-explain>Select date</div>
                    <div nz-form-explain>Please select the correct date</div>
                  </div>
                </div>
              </div>
            </div>
            <div nz-col [nzSpan]="1">
              <p nz-form-split>-</p>
            </div>
            <div nz-col [nzSpan]="6">
              <div nz-form-item nz-row>
                <div>
                  <div nz-form-control>
                    <nz-datepicker [nzSize]="'large'" [nzPlaceHolder]="'Select date'"></nz-datepicker>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
